<template>
  <div id="earlyStageAchievementRecheck" class="app-container">
    <div class="filter-container">
      <el-form
        :inline="true"
        label-position="right"
        label-width="200px"
        class="demo-form-inline"
      >
        <!-- <el-form-item label="权利人">
          <el-input style="width: 200px;" v-model="listQuery.realName" placeholder="" class="filter-item" />
        </el-form-item>
        <el-form-item label="权利人身份证号">
          <el-input style="width: 200px;" v-model="listQuery.applicantIdCardNum" placeholder="" class="filter-item" />
        </el-form-item>
        <el-form-item label="片块名称">
          <el-input style="width: 200px;" v-model="listQuery.projectName" placeholder="" class="filter-item" />
        </el-form-item>
         <el-form-item label="所在乡镇">
          <el-input style="width: 200px;" v-model="listQuery.projectName" placeholder="" class="filter-item" />
        </el-form-item>
         <el-form-item label="行政村名称">
          <el-input style="width: 200px;" v-model="listQuery.projectName" placeholder="" class="filter-item" />
        </el-form-item>
        <el-form-item label="复垦类型">
          <el-select placeholder="" style="width: 200px;" v-model="listQuery.level" clearable class="filter-item">
            <el-option label="区县级" value="DISTRICT" />
            <el-option label="市级" value="CITY" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="是否属于二调遗漏复垦点">
          <el-select placeholder="" style="width: 200px;" v-model="listQuery.level" clearable class="filter-item">
            <el-option label="区县级" value="DISTRICT" />
            <el-option label="市级" value="CITY" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="allTable">
      <el-table :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}" v-loading="listLoading" :data="list1" element-loading-text="Loading" border fit highlight-current-row>
      <!-- <el-table-column type="index" align="center" label="内业是否存在疑问" width="200">
      </el-table-column>
      <el-table-column label="外业核查结果" width="150">
        <template slot-scope="scope">{{ scope.row.author }}</template>
      </el-table-column>
      <el-table-column label="复审结果" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column> -->
        <el-table-column label="权利人" align="center" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.applicantName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="片块名称" align="center" min-width="150">
          <template slot-scope="scope">{{ scope.row.landName }}</template>
        </el-table-column>
        <el-table-column class-name="status-col" label="红线面积（㎡）" align="center" width="120">
          <template slot-scope="scope">{{ scope.row.hxmj }}</template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="乡镇" width="120">
          <template slot-scope="scope">{{ scope.row.town!=null?scope.row.village.name:''}}</template>
        </el-table-column>
        <el-table-column label="村社" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.village!=null?scope.row.village.name:''}}</template>
        </el-table-column>
        <el-table-column label="图幅号" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.tfh }}</template>
        </el-table-column>
        <el-table-column label="图斑号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.tbh }}</template>
        </el-table-column>
        <el-table-column label="图斑面积（公顷）" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.tbmj }}</template>
        </el-table-column>
        <el-table-column label="建设用地复垦面积" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.jsydfkmj }}</template>
        </el-table-column>
        <el-table-column label="宅基地面积" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.zjdmj }}</template>
        </el-table-column>
        <el-table-column label="宅基地附属用地面积" width="130" align="center">
          <template slot-scope="scope">{{ scope.row.zjdfsydmj }}</template>
        </el-table-column>
        <el-table-column label="复垦类型" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.reclaimTypeDto!=null?scope.row.reclaimTypeDto.name:'' }}</template>
        </el-table-column>
        <el-table-column label="是否属于二调遗漏复垦点" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.isSecondMovingReclaimPointDto!=null? scope.row.isSecondMovingReclaimPointDto.name:''}}</template>
        </el-table-column>
        <el-table-column label="初审规模与送审规模是否一致" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.isIdenticalScaleDto!=null?scope.row.isIdenticalScaleDto.name:'' }}</template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="listQuery.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination> -->
    </div>
    <div class="filter-container">
      <el-form
        :inline="true"
        label-position="right"
        label-width="200px"
        class="demo-form-inline"
        style="margin-top:20x;"
      >
        <el-form-item label="抽取比例">
          <div class="chouquBox">
            <el-input style="width: 200px;" v-model="chouquValue" placeholder="" class="filter-item" />
            <div class="baifenbiIcon">%</div>
          </div>
          <!-- <el-input style="width: 200px;" v-model="chouquValue" placeholder="" class="filter-item" /> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="chouqu">抽取</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit">添加</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="danger">删除所选</el-button>
    </div> -->
    <div class="fuzhushencha">
      <el-button @click="fuzheCha" v-show="aruData">辅助审查</el-button>
    </div>
    <el-table v-show="aruData" :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <!-- <el-table-column type="index" align="center" label="内业是否存在疑问" width="200">
      </el-table-column>
      <el-table-column label="外业核查结果" width="150">
        <template slot-scope="scope">{{ scope.row.author }}</template>
      </el-table-column>
      <el-table-column label="复审结果" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="权利人" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.applicantName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="片块名称" align="center" min-width="150">
        <template slot-scope="scope">{{ scope.row.landName }}</template>
      </el-table-column>
      <el-table-column class-name="status-col" label="红线面积（㎡）" align="center" width="120">
        <template slot-scope="scope">{{ scope.row.hxmj }}</template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="乡镇" width="120">
        <template slot-scope="scope">{{ scope.row.town!=null?scope.row.village.name:''}}</template>
      </el-table-column>
      <el-table-column label="村社" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.village!=null?scope.row.village.name:''}}</template>
      </el-table-column>
      <el-table-column label="图幅号" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.tfh }}</template>
      </el-table-column>
      <el-table-column label="图斑号" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.tbh }}</template>
      </el-table-column>
      <el-table-column label="图斑面积（公顷）" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.tbmj }}</template>
      </el-table-column>
      <el-table-column label="建设用地复垦面积" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.jsydfkmj }}</template>
      </el-table-column>
      <el-table-column label="宅基地面积" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.zjdmj }}</template>
      </el-table-column>
      <el-table-column label="宅基地附属用地面积" width="130" align="center">
        <template slot-scope="scope">{{ scope.row.zjdfsydmj }}</template>
      </el-table-column>
      <el-table-column label="复垦类型" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.reclaimTypeDto!=null?scope.row.reclaimTypeDto.name:'' }}</template>
      </el-table-column>
      <el-table-column label="是否属于二调遗漏复垦点" width="160" align="center">
        <template slot-scope="scope">{{ scope.row.isSecondMovingReclaimPointDto!=null? scope.row.isSecondMovingReclaimPointDto.name:''}}</template>
      </el-table-column>
      <el-table-column label="初审规模与送审规模是否一致" width="180" align="center">
        <template slot-scope="scope">{{ scope.row.isIdenticalScaleDto!=null?scope.row.isIdenticalScaleDto.name:'' }}</template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      v-show="aruData"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="listQuery.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination> -->
  </div>
</template>

<script>
import { getList } from "@/api/table";
import { queryProjectLandByExtractiveRatio,queryProjectLandRelatedInfo } from "@/api/earlyStageAchievementRecheck";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      fullscreenLoading:false,
      aruData:false,
      activeName: '1',
      list: null,
      list1: null,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        projectName: null,
        realName: null,
        level: null,
        applicantIdCardNum: null
      },
      total:0, //总数
      chouquValue:'', //抽取值
    };
  },
  created() {
    // this.fetchData();
    this.allData()
  },
  methods: {
    //前往辅助审查
    fuzheCha(){
      console.log(this.list)
      var arr=[]
      this.list.forEach((v,i)=>{
        arr.push(v.landId)
      })
      var ids=arr.join(",")
      this.$router.push({
        path:'/hegezhengPeihao/qianqichjgcs/list',
        query:{
          id:ids
        }
      })
    },
    //全数据
    allData(){
      this.listLoading=true
      var obj={
        projectId:localStorage.getItem("projectId"),
      }
      queryProjectLandRelatedInfo(obj).then(res=>{
        console.log(res)
        this.list1=res.data
        this.listLoading=false
      })
    },
    
    //抽取
    chouqu(){
      this.fullscreenLoading=true
      var obj={
        projectId:localStorage.getItem("projectId"),
        extractiveRatio:this.chouquValue
      }
      if(this.chouquValue==''){
        obj.extractiveRatio=0
      }
      queryProjectLandByExtractiveRatio(obj).then(res=>{
        this.fullscreenLoading=false
        console.log(res)
        this.list=res.data
        if(this.list!=null&&this.list.length!=0){
          this.aruData=true
        }else{
          this.aruData=false
        }
      }).catch(error=>{
        this.fullscreenLoading=false
      })
    },
    //改变每页显示条数
    handleSizeChange(e){
      console.log(e)
    },
    //改变页码
    handleCurrentChange(num){
      console.log(num)
    },
    fetchData() {
      this.listLoading = true;
      getList().then(response => {
        this.listLoading = false;
        console.log(response.data)
        this.list = response.data.items;
        this.total= response.data.total;
      }).catch(error=>{
        this.listLoading = false;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style scoped>
#earlyStageAchievementRecheck /deep/ .el-tabs__nav-wrap::after{
  height: 1px;
}
.chouquBox{
  position: relative;
}
.baifenbiIcon{
  position: absolute;
  right: 10px;
  top: 0;
  color: #97a8be;
}
.chouquBox /deep/ .el-input__inner{
  padding-right: 30px;
}
.inputItem{
  display: flex;
  align-items: center;
}
.inputItem p{
  font-size: 14px;
  margin: 0;
  margin-right: 10px;
}
.allTable{
  margin-bottom: 20px;
}
.fuzhushencha{
  margin-left: 50px;
  margin-bottom: 20px;
}
</style>
